Skip to content

Comments

chore(poc): use ai to apply aria specs to rendering specs directly#5684

Closed
gdenchevprog wants to merge 111 commits intodevelopfrom
poc-apply-aria-to-html-specs
Closed

chore(poc): use ai to apply aria specs to rendering specs directly#5684
gdenchevprog wants to merge 111 commits intodevelopfrom
poc-apply-aria-to-html-specs

Conversation

@gdenchevprog
Copy link

@gdenchevprog gdenchevprog commented Nov 26, 2025

Related research item: https://github.com/telerik/kendo/issues/24169#issuecomment-3547597170
This PR concerns Part 1 of the research and it should be a one-time thing. After we've migrated the current specs, we should update the contents of the accessibility agent file. The instructions are in the above issue.

The aria files can be removed once the migration is complete.

cc: @zhpenkov @dtopalov @jivanova

@github-actions
Copy link

github-actions bot commented Nov 26, 2025

Packages Report

core default classic bootstrap material fluent utils html
Size 32.97 KB (0.0%) 848.41 KB (0.0%) 847.09 KB (0.0%) 862.26 KB (0.0%) 1044.64 KB (0.0%) 1289.78 KB (0.0%) 625.13 KB (0.0%) 51.05 MB (8.4%🔼)
Gzip Size 5.35 KB (0.0%) 107.04 KB (0.0%) 107.33 KB (0.0%) 108.74 KB (0.0%) 122.56 KB (0.0%) 145.32 KB (0.0%) 52.15 KB (0.0%) 10.72 MB (13.1%🔼)
Compile Time 0.8 s (0.0%) 2.7 s (0.0%) 2.8 s (0.0%) 2.7 s (0.0%) 2.9 s (0.0%) 3.1 s (0.0%) 2.1 s (0.0%) 4.7 s (0.0%)

dtopalov and others added 28 commits December 3, 2025 10:06
- Created ARIA attribute validator (test-aria-attributes.mjs)
- Created WCAG compliance tester (test-wcag-compliance.mjs)
- Created bulk ARIA application helper (aria-bulk-apply.mjs)
- Enhanced accessibility agent with 4 complete workflows
- Applied ARIA attributes to avatar component (alt on img)
- Applied ARIA attributes to icon component (aria-hidden=true)
- Fixed test infrastructure (CSS selector parsing, markdown backticks)
- Added npm scripts: test:aria, test:wcag, aria:init, aria:status, aria:plan, aria:next
- Completed 2/106 components (avatar, icon)

Compliance scores:
- Avatar: 100% ARIA validation passed
- Icon: 100% ARIA validation passed
- Added PAGE_LEVEL_RULES list for non-component-specific violations
- Filters out: landmarks, headings, page structure issues
- Shows filtered count in summary: '(X page-level violations filtered out)'
- Added --include-page-level flag to show all violations
- Updated help documentation with new flag

Components now show 100% compliance when only page-level issues remain.
- Button already uses native <button> element (ARIA compliant by default)
- Added aria-label='Folder' to all icon-only buttons in tests
- Fixed WCAG 'button-name' violations (buttons need discernible text)
- 100% ARIA validation passed (459 rules checked)
- 100% WCAG 2.2 AA compliance (114 checks passed, 0 violations)

Component: button (4/106)
- Checkbox already uses type='checkbox' (ARIA compliant by default)
- Wrapped unlabeled checkboxes in checkbox-rounded with <label> tags
- Added id and labels to checkbox-group templates (vertical & horizontal)
- Fixed WCAG 'label' violations (all form elements now have labels)
- 100% ARIA validation passed (102 rules checked)
- 98.1% WCAG 2.2 AA compliance (91 checks passed, 2 target-size violations remain)

Note: Remaining target-size violations are CSS/design issues (touch targets <24px),
not ARIA markup issues. These require theme-level fixes.

Component: checkbox (5/106)
- Added role='button' to standalone chips (outside chip-list)
- Added aria-pressed='true/false' based on selected state
- Added alt='' to decorative avatar images in chips
- 100% ARIA validation passed (230 rules checked)
- 100% WCAG 2.2 AA compliance (112 checks passed, 0 violations)

Component: chip (6/106)
- Changed both ARIA and WCAG tests to use swatch='all'
- Individual swatch CSS files (e.g., default-ocean-blue-a11y.css) don't exist
- Only all.css is built by default and contains all theme styles
- Fixes missing styles issue - components now render with proper Kendo theming
- Resolves checkbox target-size violations (proper sizing now applied)

This also includes:

feat(a11y): apply ARIA to progressbar and chunk-progressbar

- Added role='progressbar' to both components
- Added aria-label with default 'Progress'
- Added aria-valuenow (calculated from value/progress)
- Added aria-valuemin=0 and aria-valuemax=100
- Omit aria-value* attributes when indeterminate=true
- 100% ARIA validation passed (57 rules checked)
- 100% WCAG 2.2 AA compliance (154 checks passed, 0 violations)

Components: progressbar (7/106), chunk-progressbar (8/106)
…ssbar

Rating:
- Added role='slider' for rating control
- Added aria-label with fallback to label prop or 'Rating'
- Added tabindex=0 for keyboard focus
- Added aria-valuenow, aria-valuemin=0, aria-valuemax based on props
- 100% ARIA validation (15 rules)
- 100% WCAG 2.2 AA compliance (56 checks)

Switch:
- Added role='switch' for switch control
- Added aria-checked='true/false' based on checked state
- Added aria-label with default 'Switch'
- Added tabindex=0 for keyboard focus
- Added aria-disabled when disabled
- 100% ARIA validation (54 rules)
- 95.7% WCAG (color-contrast is theme issue, not ARIA)

Circular-progressbar:
- Static HTML test, inherits progressbar ARIA spec
- Already tested and compliant (included in progressbar tests)

Components: circular-progressbar (9/106), rating (10/106), switch (11/106)
- Built individual swatch CSS files with npm run sass:dist
- Changed test scripts to use 'default-ocean-blue-a11y' swatch
- This swatch meets WCAG 2.2 Level AA contrast requirements (4.5:1 normal, 3:1 large)
- Switch component now 100% WCAG compliant (was 95.7% with default swatch)
- All 11 simple-level components now have 100% WCAG 2.2 AA compliance

Note: Added dist/*.css swatch files (13 total) for proper accessibility testing
- Added alt text to captcha image
- Added aria-label to audio and refresh buttons
- Added aria-label to captcha input field
- Fixed Textbox component to pass aria-label and disabled props to InputInnerInput
- Fixed Captcha to respect disabled state on all interactive elements
- Updated ARIA validator to correctly handle boolean HTML attributes (disabled, readonly, required)
- Fixed validator to properly check alternatives with 'or' operator

Result: 100% ARIA validation + 100% WCAG 2.2 AA compliance
- Replaced aria-label with proper <label for='captcha-input'> element
- Added id='captcha-input' to Textbox for label association
- Maintains 100% ARIA validation + 100% WCAG 2.2 AA compliance
- Textbox component now properly passes through all props without hardcoding aria attributes
- Updated DateInput to pass props through to InputInnerInput
  (id, aria attributes, disabled, readonly, required)
- Added title attributes to SpinButton increase/decrease buttons
- Added labels to all dateinput test files for proper form
  element association
- DateInput component now supports external label association
  via id/for

Result: 100% ARIA validation + 98.7% WCAG 2.2 AA compliance
(1 target-size violation on small size variant - acceptable
design constraint)
@dtopalov dtopalov force-pushed the poc-apply-aria-to-html-specs branch from aaa21f3 to d58ee0e Compare January 30, 2026 17:36
@dtopalov dtopalov force-pushed the poc-apply-aria-to-html-specs branch from d58ee0e to a189bdf Compare January 30, 2026 17:56
@dtopalov dtopalov force-pushed the poc-apply-aria-to-html-specs branch from 6e1af60 to 345a92c Compare January 30, 2026 18:58
@dtopalov dtopalov force-pushed the poc-apply-aria-to-html-specs branch from b567211 to cefe23e Compare February 3, 2026 07:42
@dtopalov
Copy link
Contributor

moved to #5759

@dtopalov dtopalov closed this Feb 10, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants